<script setup lang="ts">
// 用于使变量变成响应式
import {Ref, ref, isRef, shallowRef, triggerRef, customRef, reactive, shallowReactive} from "vue";

const a: string = 'aaaa'
const evnet = 'click'
const b = ref('bbb')
const parent = () => {
  console.log("父级")
}
const xxx = () => {
  console.log("子级")
}
const arr: string[] = ['a', 'b', 'c']
type M = {
  name: string
}
const Man1 = ref<M>({name: 'a'})
const Man2: Ref<M> = ref({name: 'a'})
const Man3 = shallowRef({name: 'a'})
const c = () => {
  Man1.value.name = 'b'
}
//shallowRef只可以对 .value 进行赋值
//单方法内不能同时对shallowRef和Ref进行操作
const c1 = () => {
  Man3.value = {
    name: 'c'
  }
}
const c2 = () => {
  Man3.value.name = 'c'
  //强制更新shallowRef
  triggerRef(Man3)
}

function MyRef<T>(value: T) {
  return customRef((track, trigger) => {
    return {
      get() {
        //收集依赖
        track()
        return value
      },
      set(newVal) {
        value = newVal
        // 触发依赖
        trigger()
      }
    }
  })
}

//reactive不用.value
//reactive对象本身不能直接赋值
const obj = MyRef<string>('customRef')
let form = reactive({
  name: 'a',
  age: 11
})
form.name = 'b';
let list = reactive<{
  arr: string[]
}>({arr: []})
list.arr = ['a', 'b', 'c']
const obj2 = shallowReactive({
  foo: {
    bar: {
      num: 1
    }
  }
})
//shallowReactive只到第二层'foo'
obj2.foo.bar.num = 4

</script>

<template>
  <div v-html="a"></div>
  <div @click="parent">
    <button @[evnet]="xxx">xxxxx</button>
  </div>
  <div v-bind:id="a">
  </div>
  <div :id="a">
  </div>
  <input v-model="b" type="text">
  <div>{{ b }}</div>
  <div v-for="(item,index) in arr">
    {{ item }} - {{ index }}
  </div>
  <form>
    <input v-model="form.name" type="text">
    <input v-model="form.age" type="text">
  </form>
</template>

<style scoped>

</style>
